<template>
  <section>
    <div class="search-content" style="width: 100%;">
      <div class="sort">
        <li class="first"><a title="综合">综合排序</a></li>
        <li><a title="销量">销量排序</a></li>
        <li><a title="价格">价格优先</a></li>
        <li class="big"><a title="评价"
             href="#">评价为主</a></li>
      </div>
      <div class="clear"></div>

      <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
        <li v-for="(item, index) in items.rows" @click="showItem(item)">
          <div class="i-pic limit">
            <img :src="item.img">
            <p class="title fl">{{item.name}}</p>
            <p class="price fl">
              <b>¥</b>
              <strong>{{item.price}}</strong>
            </p>
            <p class="number fl">
              销量<span>{{item.salesCount}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div id="items-page"></div>
  </section>
</template>

<script>
export default {
  name: 'SearchContent',
  mounted () {
    this.searchItems(1, true)
  },
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      items: {
        rows: [
          {
            id: 1,
            name: '【良品铺子旗舰店】手剥松子218g 坚果炒货零食新货巴西松子包邮',
            img: '/static/images/imgsearch1.jpg',
            price: 56.90,
            salesCount: 1111
          }
        ],
        total: 98,
        page: 1,
        pageSize: 12
      }
    }
  },
  methods: {
    initPagination (pages = 10) {
      let $ = this.$
      let self = this
      $('#items-page').page({
        pages: pages,
        first: '首页',
        last: '尾页',
        prev: '«',
        next: '»',
        groups: 5,
        before: function (context, next) {
          if (!context.first) {
            // load comments
            self.searchItems(context.option.curr)
          }
          next()
          $('.am-pagination').addClass('am-pagination-right')
        }
      })
    },
    searchItems (page = 1, init = false) {
      // TODO
      // 1. build searchParams
      // 2. fetchData from server
      // 3. setData
      if (init) {
        this.initPagination(10)
      }
    },
    showItem (item) {
      let url = `/item.html?id=${item.id}`
      window.open(url)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
